<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>课堂练习题</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<fieldset id="E01">
    <legend></legend>
    <ul>
        <li v-once>{{h1}}</li>
        <li v-once>{{h2}}</li>
        <li v-once>{{h3}}</li>
    </ul>
</fieldset>
<script type="text/javascript">
    var v1 = new Vue({
        el: '#E01',
        data: {
            h1: "鲁智深",
            h2: "武松",
            h3: "林冲"
        }
    })
    /**
     1.在legend中写入 "水泊梁山", 并且让其内容不可改变
     2.在三个 li 中 写入三个水浒英雄的名字
     */
</script>

<style>
    /*斗篷样式*/
    [v-cloak] {
        display: none;
    }
</style>
<fieldset id="E02">
    <legend></legend>
    <ul>
        <li v-cloak>
            <button>{{h2}}</button>
        </li>
        <li v-cloak>
            <button>{{h1}}</button>
        </li>
        <li v-cloak>
            <button>{{h3}}</button>
        </li>
    </ul>
</fieldset>
<script type="text/javascript">
    window.setTimeout(() => {
        var v2 = new Vue({
            el: '#E02',
            data: {
                h1: "鲁智深",
                h2: "武松",
                h3: "林冲"
            }
        })
    }, 500)

    /**
     1.在legend中写入 "水泊梁山" 并加上"斗篷"
     2.给每个li中添加一个按钮, 每个按钮上显示一个水浒英雄的名字
     */
</script>


<fieldset id="E03">
    <legend>练习题3: 计算属性</legend>
    <dl>
        <dt></dt>
        <dd>力量:{{power}}</dd>
        <dd>智力:{{intel}}</dd>
        <dd>敏捷:{{agile}}</dd>
        <dd>综合战力:{{CphCP}}</dd>
    </dl>
</fieldset>
<script type="text/javascript">
    var heroe = {name: "花和尚鲁智深", power: 98, intel: 76, agile: 73};
    var v3 = new Vue({
        el: '#E03',
        data: {},
        computed: {
            CphCP() {
                return heroe.power + heroe.intel + heroe.agile;
            },
            name() {
                return heroe.name;
            },
            power() {
                return heroe.power;
            },
            agile() {
                return heroe.agile;
            },
            intel() {
                return heroe.intel;
            }
        }
    })
    /**
     1. 将 heroe 对象的值设置到 dl 中
     3. 第 4 个 dd 使用计算属性算出其综合战力值 = 力量 + 智力 + 敏捷
     */
</script>


<fieldset id="E04">
    <legend>练习题4: 样式设置</legend>
    <div :style="styleSet">
        <img src="https://img1.baidu.com/it/u=1589816454,651542751&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=712" :style="imgHeight"><br> <span>鲁智深</span>
    </div>
    <div :style="styleSet">
        <img src="https://img0.baidu.com/it/u=3205226022,942213347&fm=253&fmt=auto&app=138&f=PNG?w=268&h=366" :style="imgHeight"><br> <span>林冲</span>
    </div>
    <div :style="styleSet">
        <img src="https://img2.baidu.com/it/u=1934025117,3206437679&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=668" :style="imgHeight"><br> <span>武松</span>
    </div>
</fieldset>
<script type="text/javascript">
    var v4 = new Vue({
        el: "#E04",
        data: {
            imgHeight: 'height:100px'
        },
        methods: {
            setImgHeight() {
                return {height: "100px"}
            },
            styleSet() {
                return {
                    width: '120px',
                    textAlign: 'center',
                    border: '1px red solid',
                    display: 'inline-block',
                    padding: '5px'
                }
            }
        }
    })
    /**
     1. img 中添加水浒英雄的图片, 并且使用属性设定高度为100px
     2. 给 div 设置: 宽度120px + 文字居中 + 边框 + 行内块 + 内边距5px
     3. 给 span 添加英雄名字
     */
</script>


<style>
    .border {
        border: 2px solid blue;
    }

    .text {
        color: red;
        text-align: center;
    }

    .size {
        width: 150px;
        height: 150px;
        padding: 5px;
        display: inline-block;
        margin: 5px;
        padding: 5px;
    }
</style>
<fieldset id="E05">
    <legend>练习题5: class属性</legend>
    <div id="div1" :class="['size']">
        <img width="100px"
             src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
        <br> 关注样式
    </div>
    <div id="div2" :class="{border:true , size:true}">
        <img width="100px"
             src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
        <br> 关注样式
    </div>
    <div id="div3" :class="style1">
        <img width="100px"
             src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
        <br> 关注样式
    </div>
</fieldset>
<script type="text/javascript">
    var v5 = new Vue({
        el: "#E05",
        data: {
            style: ['border', 'size', 'text']
        },
        computed: {
            style1() {
                return this.style;
            }
        }
    })
    /**
     1. 将 .size 样式应用到 div1 上 ( 数组方式)
     2. 将 .border .size 样式应用到 div2 上 ( 对象方式)
     2. 将 .border .text .size 样式应用到 div3 上 ( 计算属性方式)
     */
</script>


</body>
</html>